import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { MapPin } from "lucide-react";

const popularRoutes = [
  {
    from: "北京",
    to: "天津",
    price: "¥100起",
    frequency: "每天多个班次"
  },
  {
    from: "上海",
    to: "苏州",
    price: "¥80起",
    frequency: "每小时一班"
  },
  {
    from: "广州",
    to: "深圳",
    price: "¥60起",
    frequency: "随时可约"
  },
  {
    from: "成都",
    to: "重庆",
    price: "¥120起",
    frequency: "每天多个班次"
  }
];

export function PopularRoutes() {
  return (
    <section className="py-16 bg-muted">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center mb-12">热门路线</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {popularRoutes.map((route, index) => (
            <Card key={index} className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <div className="flex items-center space-x-2 text-lg">
                    <MapPin className="h-5 w-5 text-primary" />
                    <span>{route.from}</span>
                    <span>→</span>
                    <span>{route.to}</span>
                  </div>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-2xl font-bold text-primary mb-2">{route.price}</p>
                <p className="text-sm text-muted-foreground">{route.frequency}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}